<template>
  <el-card class="box-card">
    <el-row>
      <el-col :span="24">
        <div>
          <span
            style="color: cornflowerblue; font-size: 20px; line-height: 50px"
            >项目列表</span
          >
        </div>
        <div>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="projectName" label="项目名称">
            </el-table-column>
            <el-table-column prop="declarantName" label="申报人">
            </el-table-column>
            <el-table-column prop="dicValue" label="项目来源单位">
            </el-table-column>
            <el-table-column prop="name" label="项目级别"> </el-table-column>
            <el-table-column prop="disciplineID" label="项目类型">
            </el-table-column>
            <el-table-column prop="declarationTime" label="申报时间">
            </el-table-column>
            <el-table-column prop="endTime" label="计划结束时间">
            </el-table-column>
          </el-table>
        </div>
        <br />
        <div>
          <span
            style="color: cornflowerblue; font-size: 20px; line-height: 50px"
            >分配专家</span
          >
          <hr />
        </div>
        <div>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="2">分配方式：</el-col>
                <el-col :span="6">
                  <el-select
                    @change="CheckExpert"
                    v-model="GroupType"
                    placeholder="请选择"
                  >
                    <el-option label="专家" value="0">专家</el-option>
                    <el-option label="专家组" value="1">专家组</el-option>
                  </el-select>
                </el-col>
                <el-col :span="2">专家搜索：</el-col>
                <el-col :span="4">
                  <el-input
                    placeholder="请输入"
                    v-model="ExpertInfor"
                    @change="GetlistReviewspecialAsync()"
                  ></el-input>
                </el-col>
                <el-col :span="2"> <i class="el-icon-search"></i></el-col>
              </el-row>
            </el-col>
          </el-row>
          <hr />
          <div style="width: 100%">
            <el-transfer
              style="width: 100%"
              filter-placeholder="请输入专家名称"
              v-model="CheckExpertList"
              :titles="title"
              :data="data"
            ></el-transfer>
          
          </div>

          <el-button @click="SavesaChange" type="primary">确定</el-button>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  props: { id: undefined },
  //数据
  data() {
    return {
      title: ["可选专家", "已选专家"],
      CheckExpertList: [],
      GroupType: "",
      ExpertInfor: "",
      tableData: [],
      ExpertList: [], //专家信息
      GroupList: [], //专家分组信息
      data: [],
    };
  },
  //计算属性
  computed: {},
  //挂载
  created() {
    this.GetExpertList();
    this.GetlistReviewspecialAsync();
    this.GetGroupList();
  },
  //方法
  methods: {
    //获取项目来源信息
    GetExpertList() {
      this.http
        .get(
          "http://localhost:9991/api/tb_project_apply_basicinfo/ExpertInfo?id=" +
            this.$route.query.id
        )
        .then((res) => {
          console.log(res);
          this.tableData = res.data;
        });
    },
    //获取所有专家信息
    GetlistReviewspecialAsync() {
      this.http
        .get(
          "http://localhost:9991/api/tb_project_reviewspecial/GetlistReviewspecialAsync?size=999&index=1&specialistName=" +
            this.ExpertInfor
        )
        .then((res) => {
          this.ExpertList = res;
        });
    },
    //获取专家分组信息
    GetGroupList() {
      this.http
        .post("api/tb_project_reviewspecial_group/GetList")
        .then((res) => {
          this.GroupList = res.data;
        });
    },
    CheckExpert() {
      this.data = [];
      if (this.GroupType == "0") {
        this.ExpertList.forEach((item, index) => {
          this.data.push({
            index: item.specialistName,
            key: item.specialistID,
            label: item.specialistName,
            value: item.specialistID,
          });
        });
      } else if (this.GroupType == "1") {
        this.GroupList.forEach((item, index) => {
          this.data.push({
            index: item.panelName,
            key: item.panelID,
            label: item.panelName,
            value: item.panelID,
          });
        });
      }
    },
    SavesaChange() {
      console.log(this.CheckExpertList.toString())
      this.http.post()
    },
  },
};
</script>

<style>
.el-transfer-panel {
  overflow: hidden;
  background: var(--el-bg-color-overlay);
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width: var(--el-transfer-panel-width);
  width: 550px;
  max-height: 100%;
  box-sizing: border-box;
  position: relative;
}
</style>
